<template>
	<view class="record-detail-container">
		<view class="detail-card">
			<view class="detail-header">
				<view class="date-time">
					<text class="date">{{ recordDetail.date }}</text>
					<text class="time">{{ recordDetail.time }}</text>
				</view>
				<view class="type">{{ recordDetail.typeText }}</view>
			</view>
			
			<view class="value-container">
				<text class="value" :class="getValueClass(recordDetail.value)">{{ recordDetail.value?.toFixed(1) || '--' }}</text>
				<text class="unit">mmol/L</text>
			</view>
			
			<view class="status-container">
				<view class="status" :class="getStatusClass(recordDetail.value)">
					{{ getStatusText(recordDetail.value) }}
				</view>
				<view class="status-desc">{{ getStatusDesc(recordDetail.value) }}</view>
			</view>
			
			<view class="remark-container" v-if="recordDetail.remark">
				<view class="remark-title">备注信息</view>
				<view class="remark-content">{{ recordDetail.remark }}</view>
			</view>
			
			<view class="btn-group">
				<button class="btn-delete" @click="confirmDelete">删除记录</button>
				<button class="btn-back" @click="goBack">返回列表</button>
			</view>
		</view>
		
		<view class="reference-card">
			<view class="reference-title">血糖参考范围 (mmol/L)</view>
			<view class="reference-table">
				<view class="table-row table-header">
					<view class="table-cell">状态</view>
					<view class="table-cell">空腹</view>
					<view class="table-cell">餐后2小时</view>
				</view>
				<view class="table-row">
					<view class="table-cell">正常</view>
					<view class="table-cell">3.9-6.1</view>
					<view class="table-cell">≤7.8</view>
				</view>
				<view class="table-row">
					<view class="table-cell">偏高</view>
					<view class="table-cell">6.1-7.0</view>
					<view class="table-cell">7.8-11.1</view>
				</view>
				<view class="table-row">
					<view class="table-cell">糖尿病</view>
					<view class="table-cell">≥7.0</view>
					<view class="table-cell">≥11.1</view>
				</view>
			</view>
			<view class="reference-note">注: 以上数据仅供参考，请遵医嘱</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	import { deleteRecord } from '@/common/api/record.js'
	
	export default {
		data() {
			return {
				recordId: null,
				recordDetail: {}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.recordId = options.id
				this.loadRecordDetail()
			} else {
				uni.showToast({
					title: '记录ID不存在',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		methods: {
			...mapActions('bloodSugar', ['deleteBloodSugarRecord']),
			
			// 加载记录详情
			loadRecordDetail() {
				// 在实际应用中，可以从API获取详情
				// 这里模拟从缓存获取
				try {
					const records = uni.getStorageSync('bloodSugarRecords') || []
					const record = records.find(item => item.id == this.recordId)
					
					if (record) {
						this.recordDetail = record
					} else {
						throw new Error('记录不存在')
					}
				} catch (e) {
					console.error('获取记录详情失败:', e)
					uni.showToast({
						title: '获取记录详情失败',
						icon: 'none'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			},
			
			// 获取血糖值对应的样式类
			getValueClass(value) {
				if (!value) return ''
				if (value < 3.9) return 'value-low'
				if (value > 7.8) return 'value-high'
				if (value > 6.1 && value <= 7.8) return 'value-medium'
				return 'value-normal'
			},
			
			// 获取血糖状态对应的样式类
			getStatusClass(value) {
				if (!value) return ''
				if (value < 3.9) return 'status-low'
				if (value > 7.8) return 'status-high'
				if (value > 6.1 && value <= 7.8) return 'status-medium'
				return 'status-normal'
			},
			
			// 获取血糖状态文本
			getStatusText(value) {
				if (!value) return '未知'
				if (value < 3.9) return '血糖偏低'
				if (value > 7.8) return '血糖偏高'
				if (value > 6.1 && value <= 7.8) return '血糖略高'
				return '血糖正常'
			},
			
			// 获取血糖状态描述
			getStatusDesc(value) {
				if (!value) return ''
				if (value < 3.9) return '注意低血糖症状，适当进食'
				if (value > 7.8) return '血糖超标，注意控制饮食和用药'
				if (value > 6.1 && value <= 7.8) return '血糖略微超标，继续监测'
				return '血糖在正常范围内，继续保持'
			},
			
			// 确认删除
			confirmDelete() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该条血糖记录吗？',
					success: async res => {
						if (res.confirm) {
							await this.doDeleteRecord()
						}
					}
				})
			},
			
			// 执行删除
			async doDeleteRecord() {
				uni.showLoading({
					title: '删除中...'
				})
				
				try {
					// 调用API删除记录
					const res = await deleteRecord(this.recordId)
					if (res.code === 0) {
						// 更新Vuex状态
						this.deleteBloodSugarRecord(this.recordId)
						
						// 提示成功
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						
						// 返回列表页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						throw new Error(res.message || '删除失败')
					}
				} catch (e) {
					console.error('删除记录失败:', e)
					uni.showToast({
						title: typeof e === 'string' ? e : '删除失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			
			// 返回列表页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.record-detail-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		
		.detail-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 20rpx;
			
			.detail-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.date-time {
					.date {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						margin-right: 10rpx;
					}
					
					.time {
						font-size: 28rpx;
						color: #666;
					}
				}
				
				.type {
					font-size: 26rpx;
					color: #8cc9a1;
					padding: 6rpx 20rpx;
					background-color: rgba(140, 201, 161, 0.1);
					border-radius: 20rpx;
				}
			}
			
			.value-container {
				text-align: center;
				margin-bottom: 30rpx;
				
				.value {
					font-size: 80rpx;
					font-weight: bold;
					
					&.value-normal {
						color: #8cc9a1;
					}
					
					&.value-medium {
						color: #f0ad4e;
					}
					
					&.value-high {
						color: #d9534f;
					}
					
					&.value-low {
						color: #5bc0de;
					}
				}
				
				.unit {
					font-size: 30rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}
			
			.status-container {
				text-align: center;
				margin-bottom: 40rpx;
				
				.status {
					display: inline-block;
					font-size: 30rpx;
					font-weight: bold;
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
					margin-bottom: 10rpx;
					
					&.status-normal {
						background-color: rgba(140, 201, 161, 0.1);
						color: #8cc9a1;
					}
					
					&.status-medium {
						background-color: rgba(240, 173, 78, 0.1);
						color: #f0ad4e;
					}
					
					&.status-high {
						background-color: rgba(217, 83, 79, 0.1);
						color: #d9534f;
					}
					
					&.status-low {
						background-color: rgba(91, 192, 222, 0.1);
						color: #5bc0de;
					}
				}
				
				.status-desc {
					font-size: 26rpx;
					color: #666;
				}
			}
			
			.remark-container {
				background-color: #f9f9f9;
				padding: 20rpx;
				border-radius: 8rpx;
				margin-bottom: 40rpx;
				
				.remark-title {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.remark-content {
					font-size: 26rpx;
					color: #666;
					line-height: 1.5;
				}
			}
			
			.btn-group {
				display: flex;
				
				.btn-delete, .btn-back {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 40rpx;
					font-size: 30rpx;
				}
				
				.btn-delete {
					background-color: #f5f5f5;
					color: #d9534f;
					margin-right: 20rpx;
				}
				
				.btn-back {
					background-color: #8cc9a1;
					color: #fff;
				}
			}
		}
		
		.reference-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.reference-title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			
			.reference-table {
				border: 1rpx solid #f0f0f0;
				border-radius: 8rpx;
				overflow: hidden;
				margin-bottom: 15rpx;
				
				.table-row {
					display: flex;
					border-bottom: 1rpx solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					&.table-header {
						background-color: #f9f9f9;
						font-weight: bold;
					}
					
					.table-cell {
						flex: 1;
						padding: 16rpx 10rpx;
						text-align: center;
						font-size: 26rpx;
						color: #333;
						border-right: 1rpx solid #f0f0f0;
						
						&:last-child {
							border-right: none;
						}
					}
				}
			}
			
			.reference-note {
				font-size: 24rpx;
				color: #999;
				text-align: center;
			}
		}
	}
</style> 